<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <title>景点列表</title>
</head>
<body>
<div id="app">

    <div class="container">

        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <span> {{ message }} </span>
                <table class="table table-striped table-hover">
                    <tr>
                        <th>ID</th>
                        <th>景点</th>
                        <th>图片</th>
                        <th>旺季时间</th>
                        <th>旺季票价</th>
                        <th>淡季票价</th>
                        <th>景点描述</th>
                        <th>操作</th>
                    </tr>
                    <tbody>
                    <tr v-for="place in places" :key="place.id">
                        <td> {{ place.id }} </td>
                        <td> {{ place.name }} </td>
                        <td><img :src="'data:image/png;base64,'+place.picpath" style="width: 100px;height: 50px;"></td>
                        <td> {{ place.hottime }} </td>
                        <td> {{ place.hotticket }} </td>
                        <td> {{ place.dimticket }} </td>
                        <td> {{ place.placedes }} </td>
                        <td>
                            <button class="btn btn-danger" @click="deleteById(place.id)">删除景点</button>
                            <button class="btn btn-info">修改景点</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <a @click.prevent="findAll(page-1,rows,id)">&lt;上一页</a>
                &nbsp;<a v-for="pageNum in totalsPage" @click.prevent="findAll(pageNum,rows,id)"> {{ pageNum }} </a>&nbsp;
                <a @click.prevent="findAll(page+1,rows,id)">下一页&gt;</a>
                <button type="button" class="btn btn-info" @click="toAdd">添加景点</button>
            </div>
        </div>

    </div>

</div>
</body>
</html>
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            places:{},
            message:"",
            id:"",
            page:1,
            rows:6,
            totalsPage:1,
            totals:0,
        },
        methods:{
            findAll(page,rows,id){
                let  _this = this;
                if (page>_this.totalsPage){
                    return;
                }
                if (page<1){
                    return;
                }
                axios.get("http://localhost:9999/place/findAll?page="+page+"&rows="+rows+"&provinceId="+id).then(function (response) {
                    if (response.data.flag){
                        _this.page = response.data.page;
                        _this.totalsPage = response.data.totalsPage;
                        _this.totals = response.data.totals;
                        _this.places = response.data.places;
                    }

                });
            },
            toAdd(){
                location.href="addPlace.html";
            },
            deleteById(id){
                let _this = this;
                console.log(id);
                axios.get("http://localhost:9999/place/delete?id="+id).then(function (response) {
                    if (response.data.flag){
                        location.href="placeList.html";
                    }else{
                        _this.message = response.data.message;
                    }
                })
            }
        },
        created(){
            this.id = location.href.substring(location.href.indexOf("=")+1);
            this.findAll(this.page,this.rows,this.id);
        }
    });
</script>